<%@page pageEncoding="UTF-8" %>
<!doctype html>
<html lang="zh-cmn">
<head>
    <%@include file="/WEB-INF/jsp/comm/head.jsp"%>
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label>所属线路:&nbsp;&nbsp;</label>
                        <select name="lineCode" class="form-control">
                            <option value="">--请选择--</option>
                        </select>
                    </div>&nbsp;&nbsp;
                    <div class="form-group">
                        <label>是否启用:&nbsp;&nbsp;</label>
                        <select name="isStart" class="form-control">
                            <option value="">--请选择--</option>
                            <option value="1">启用</option>
                            <option value="0">停用</option>
                        </select>
                    </div>&nbsp;&nbsp;
                    <button type="button" class="btn btn-info" onclick="mhcx()"><i class="glyphicon glyphicon-search"></i>&nbsp;查询杆塔</button>
                    <button type="button" class="btn btn-primary" onclick="addPole()"><i class="glyphicon glyphicon-plus-sign"></i>&nbsp;添加杆塔</button>
                    <button type='button' class='btn btn-danger' onclick='delPole()'><i class="glyphicon glyphicon-remove"></i>&nbsp;删除杆塔</button>
                </form>
            </div>
        </div>
        <table id="poleTb"
               data-toggle="table"
               data-url="${ctx}/pole/search"
               data-striped="true"
               data-pagination="true"
               data-side-pagination="server"
               data-page-size="5"
               data-page-list="[5,10,15]"
               data-query-params="queryParams"
               data-toolbar="toolbar"
               data-click-to-select="true">
            <thead>
            <tr>
                <th data-checkbox="true"></th>
                <th data-field="poleCode">杆塔编号</th>
                <th data-field="lineName">所属路线</th>
                <th data-field="isStart" data-formatter="fomStart">状态(启用/停用)</th>
                <th data-events="events" data-formatter="fmtOpt">操作</th>
            </tr>
            </thead>
        </table>
    </div>
    <div id="add">
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-md-4 control-label">杆塔编号：</label>
                <div class="col-md-5">
                    <input type="text" name="poleCode" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">线路编号：</label>
                <div class="col-md-5">
                    <select name="lineCode" id="lineCode" class="form-control">
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">线路名称：</label>
                <div class="col-md-5">
                    <select name="lineName" class="form-control">
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">启用状态：</label>
                <div class="col-md-5">
                    <label class="radio-inline">
                        <input type="radio" name="isStart" value="1" checked/>启用
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="isStart" value="0"/>不启用
                    </label>
                </div>
            </div>
        </form>
    </div>



    <div id="update">
        <form class="form-horizontal">
            <input type="hidden" name="id">
            <div class="form-group">
                <label class="col-md-4 control-label">杆塔编号：</label>
                <div class="col-md-5">
                    <input type="text" name="poleCode" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">线路编号：</label>
                <div class="col-md-5">
                    <select name="lineCode" id="lineCodeu" class="form-control">
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">线路名称：</label>
                <div class="col-md-5">
                    <select name="lineName" class="form-control">
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <%@include file="/WEB-INF/jsp/comm/foot.jsp"%>
    <script src="/static/hcJs/poleJs.js"></script>
<script>
    function fmtOpt(value, row){
        var edit = row["isStart"] == 1 ? '<button class="btn btn-primary edit">停用</button>' : '<button class="btn btn-danger edit">启用</button>'
        var update = '<button class="btn btn-default update">修改</button>';
        return edit+update;
    }
    var events={
        "click .edit" : function (e, value, row) {
            return edit(row);
        },
        "click .update" : function(e, value, row){
            return update(row);
        }
    }
    /**
     * 状态修改
     * @param row
     */
    function edit(row){
        var isStart;
        if(row["isStart"]==1){
            isStart=0;
        }else{
            isStart=1;
        }
        $.post(ctx+"pole/updateStatusId",{id:row["id"],isStart:isStart},function(msg){
            if(msg==1){
                toastr.success("修改成功！")
            }else{
                toastr.error("修改失败！");
            }
            $("#poleTb").bootstrapTable("refresh");
        })
    }
    /**
     * 线路修改
     */
    $(function(){
        $("#update").dialog({
            title:"修改线路",
            btnName:"确定",
            btnBind:function(){
                var param=$("#update form").serialize();
                $.post(ctx+"pole/update",param,function(msg){
                    toastr.warning("信息提示",msg);
                    $("#update").dialog("close");
                    $("#poleTb").bootstrapTable("refresh");
                },'text');
            }
        });
    });
    function update(row){
        $("#update form")[0].reset();
        for(var name in row){
            $("#update").find("[name="+name+"]").val(row[name]);
        }
        $("#update").dialog("open");
    }

    /**
     * 两级联动
     */
    $(function(){
        $.getJSON(ctx+"line/search",function(arr){
            $(arr).each(function(){
                var $opt=$("<option/>");
                $opt.html(this.lineCode);
                $opt.val(this.lineCode);
                $opt.attr("data-line",JSON.stringify(this));
                $opt.appendTo("[name=lineCode]");
            });
        });
        $("#lineCode").change(function () {
            var data = JSON.parse($(this).find("option:selected").attr("data-line"));
            $("#add [name=lineName]").val(data.lineName);
        })
        $("#lineCodeu").change(function () {
            var data = JSON.parse($(this).find("option:selected").attr("data-line"));
            $("#update [name=lineName]").val(data.lineName);
        })
    });

    /**
     * 线路名称下拉
     */
    $(function(){
        $.getJSON(ctx+"line/search",function(arr){
            $(arr).each(function(){
                var $opt=$("<option/>");
                $opt.html(this.lineName);
                $opt.val(this.lineName);
                $opt.appendTo("[name=lineName]");
            });
        });
    });

</script>
</body>
</html>